<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="box">1</div>
    <div id="box">2</div>
    <div id="box">3</div>
    <div class="cont">4</div>
    <div class="cont">5</div>
    <div class="cont">6</div>
    <div class="msg">
        <div class="xbox">
            <h1>标题1</h1>
            <h1>标题2</h1>
        </div>
        <h1>标题3</h1>
        <h1>标题4</h1>
    </div>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="text" name="password">
    <ul class="list">
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
        <li>link5</li>
        <li>link6</li>
        <li>link7</li>
        <li>link8</li>
    </ul>
</body>
<script>
    
    // id：就算有多个符合要求的元素，也只选择一个
    // var oBox = document.getElementById("box");
    // console.log(typeof oBox);
    // console.log(oBox);
    // 可以直接使用
    // oBox.style.background = "red"

    // className：就算只有一个符合要求的元素，得到的结果也是数组的形式
    // var aCont = document.getElementsByClassName("cont");
    // console.log(aCont);
    // 解析数组之后才能使用元素
    // aCont[0].style.background = "red"
    // aCont[1].style.background = "red"
    // aCont[2].style.background = "red"

    // tagName：数组
    // var aSpan = document.getElementsByTagName("span");
    // console.log(aSpan);

    // name：数组，注意哪些元素有name，表单控件才有name
    // var aPassword = document.getElementsByName("password");
    // console.log(aPassword);

    
    // query：支持css选择器写法
    // 就算有多个符合要求的元素，也只选择一个
    // var ele = document.querySelector("#box");
    // var ele = document.querySelector(".cont");
    // var ele = document.querySelector("span");
    // var ele = document.querySelector(".msg h1");
    // var ele = document.querySelector(".msg>h1");
    // var ele = document.querySelector(".msg+span");
    // var ele = document.querySelector(".msg~span");
    // console.log(ele);

    // queryAll：支持css选择器写法
    // 就算只有一个符合要求的元素，得到的结果也是数组的形式
    // var eles = document.querySelectorAll("#box");
    // var eles = document.querySelectorAll(".cont");
    // var eles = document.querySelectorAll("span");
    // var eles = document.querySelectorAll(".msg h1");
    // var eles = document.querySelectorAll(".msg>h1");
    // var eles = document.querySelectorAll(".msg+span");
    // var eles = document.querySelectorAll(".msg~span");
    // console.log(eles);


    // var oXbox = document.querySelector(".xbox");
    // console.log(oXbox)
    // 子选父元素：单个
    // console.log(oXbox.parentNode);

    // var olist = document.querySelector(".list");
    // console.log(olist);
    // 父选子元素：
    // 所有子元素
    // console.log(olist.children);
    // 第一个子元素
    // console.log(olist.firstElementChild);
    // 最后一个子元素
    // console.log(olist.lastElementChild);


    var omsg = document.querySelector(".msg");
    console.log(omsg);
    // 上一个兄弟元素
    console.log(omsg.previousElementSibling);
    // 下一个兄弟元素
    console.log(omsg.nextElementSibling);


</script>
</html>